<template>
  <div class="report-generation-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">报表生成</h1>
        <p class="page-subtitle">自定义生成各类运行报告和分析报表</p>
      </div>
      <div class="header-right">
        <button class="header-btn" @click="loadTemplate">
          📋 模板库
        </button>
        <button class="header-btn" @click="previewReport">
          👁️ 预览报表
        </button>
        <button class="header-btn primary" @click="generateReport">
          📊 生成报表
        </button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 左侧配置面板 -->
      <div class="config-panel">
        <!-- 报表基本信息 -->
        <div class="config-section">
          <h3 class="section-title">基本信息</h3>
          <div class="form-group">
            <label class="form-label">报表名称</label>
            <input 
              v-model="reportConfig.name" 
              type="text" 
              class="form-input"
              placeholder="输入报表名称"
            />
          </div>
          
          <div class="form-group">
            <label class="form-label">报表类型</label>
            <select v-model="reportConfig.type" class="form-select">
              <option value="">选择报表类型</option>
              <option value="daily">日报</option>
              <option value="weekly">周报</option>
              <option value="monthly">月报</option>
              <option value="quarterly">季报</option>
              <option value="annual">年报</option>
              <option value="custom">自定义</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">报表分类</label>
            <select v-model="reportConfig.category" class="form-select">
              <option value="">选择分类</option>
              <option value="operation">运行报告</option>
              <option value="maintenance">维护报告</option>
              <option value="fault">故障分析</option>
              <option value="performance">性能分析</option>
              <option value="cost">成本分析</option>
              <option value="comprehensive">综合报告</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">描述</label>
            <textarea 
              v-model="reportConfig.description" 
              class="form-textarea"
              placeholder="描述报表的用途和内容"
              rows="3"
            ></textarea>
          </div>
        </div>

        <!-- 时间范围配置 -->
        <div class="config-section">
          <h3 class="section-title">时间范围</h3>
          <div class="form-group">
            <label class="form-label">时间类型</label>
            <select v-model="reportConfig.timeType" class="form-select">
              <option value="relative">相对时间</option>
              <option value="absolute">绝对时间</option>
            </select>
          </div>
          
          <div v-if="reportConfig.timeType === 'relative'" class="time-relative">
            <div class="form-group">
              <label class="form-label">时间范围</label>
              <select v-model="reportConfig.relativeTime" class="form-select">
                <option value="last_1_hour">过去1小时</option>
                <option value="last_24_hours">过去24小时</option>
                <option value="last_7_days">过去7天</option>
                <option value="last_30_days">过去30天</option>
                <option value="last_90_days">过去90天</option>
                <option value="last_1_year">过去1年</option>
              </select>
            </div>
          </div>
          
          <div v-else class="time-absolute">
            <div class="form-group">
              <label class="form-label">开始时间</label>
              <input 
                v-model="reportConfig.startTime" 
                type="datetime-local" 
                class="form-input"
              />
            </div>
            <div class="form-group">
              <label class="form-label">结束时间</label>
              <input 
                v-model="reportConfig.endTime" 
                type="datetime-local" 
                class="form-input"
              />
            </div>
          </div>
        </div>

        <!-- 数据源配置 -->
        <div class="config-section">
          <h3 class="section-title">数据源</h3>
          <div class="data-source-list">
            <div 
              v-for="source in availableDataSources" 
              :key="source.id"
              class="data-source-item"
              :class="{ selected: selectedDataSources.includes(source.id) }"
              @click="toggleDataSource(source.id)"
            >
              <div class="source-header">
                <span class="source-icon">{{ source.icon }}</span>
                <span class="source-name">{{ source.name }}</span>
                <span class="source-status" :class="source.status">
                  {{ getSourceStatusText(source.status) }}
                </span>
              </div>
              <div class="source-description">{{ source.description }}</div>
              <div class="source-meta">
                <span class="source-count">{{ source.recordCount }} 条记录</span>
                <span class="source-size">{{ source.dataSize }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 车辆筛选 -->
        <div class="config-section">
          <h3 class="section-title">车辆筛选</h3>
          <div class="vehicle-filter">
            <div class="filter-type">
              <label class="radio-option">
                <input type="radio" v-model="reportConfig.vehicleFilter" value="all" />
                <span>所有车辆</span>
              </label>
              <label class="radio-option">
                <input type="radio" v-model="reportConfig.vehicleFilter" value="category" />
                <span>按类型筛选</span>
              </label>
              <label class="radio-option">
                <input type="radio" v-model="reportConfig.vehicleFilter" value="specific" />
                <span>指定车辆</span>
              </label>
            </div>
            
            <div v-if="reportConfig.vehicleFilter === 'category'" class="category-filter">
              <div class="checkbox-group">
                <label 
                  v-for="category in vehicleCategories" 
                  :key="category.id"
                  class="checkbox-option"
                >
                  <input 
                    type="checkbox" 
                    :value="category.id"
                    v-model="selectedCategories"
                  />
                  <span>{{ category.name }} ({{ category.count }})</span>
                </label>
              </div>
            </div>
            
            <div v-if="reportConfig.vehicleFilter === 'specific'" class="specific-vehicles">
              <div class="vehicle-search">
                <input 
                  v-model="vehicleSearchQuery" 
                  type="text" 
                  placeholder="搜索车辆..."
                  class="search-input"
                />
              </div>
              <div class="vehicle-list">
                <div 
                  v-for="vehicle in filteredVehicles" 
                  :key="vehicle.id"
                  class="vehicle-item"
                  :class="{ selected: selectedVehicles.includes(vehicle.id) }"
                  @click="toggleVehicle(vehicle.id)"
                >
                  <span class="vehicle-name">{{ vehicle.name }}</span>
                  <span class="vehicle-number">{{ vehicle.number }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 报表内容配置 -->
        <div class="config-section">
          <h3 class="section-title">报表内容</h3>
          <div class="content-categories">
            <div 
              v-for="category in reportContentCategories" 
              :key="category.id"
              class="content-category"
            >
              <div class="category-header">
                <label class="category-checkbox">
                  <input 
                    type="checkbox" 
                    :checked="isCategorySelected(category.id)"
                    @change="toggleContentCategory(category.id)"
                  />
                  <span class="category-title">{{ category.name }}</span>
                </label>
              </div>
              
              <div v-if="isCategorySelected(category.id)" class="category-items">
                <label 
                  v-for="item in category.items" 
                  :key="item.id"
                  class="content-item"
                >
                  <input 
                    type="checkbox" 
                    :value="item.id"
                    v-model="selectedContentItems"
                  />
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-description">{{ item.description }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- 输出格式配置 -->
        <div class="config-section">
          <h3 class="section-title">输出格式</h3>
          <div class="format-options">
            <label 
              v-for="format in outputFormats" 
              :key="format.value"
              class="format-option"
              :class="{ selected: reportConfig.outputFormat === format.value }"
            >
              <input 
                type="radio" 
                :value="format.value"
                v-model="reportConfig.outputFormat"
              />
              <div class="format-content">
                <span class="format-icon">{{ format.icon }}</span>
                <div class="format-info">
                  <span class="format-name">{{ format.name }}</span>
                  <span class="format-description">{{ format.description }}</span>
                </div>
              </div>
            </label>
          </div>
          
          <div class="format-settings">
            <div class="form-group">
              <label class="form-label">页面方向</label>
              <select v-model="reportConfig.pageOrientation" class="form-select">
                <option value="portrait">纵向</option>
                <option value="landscape">横向</option>
              </select>
            </div>
            
            <div class="form-group">
              <label class="form-label">页面大小</label>
              <select v-model="reportConfig.pageSize" class="form-select">
                <option value="A4">A4</option>
                <option value="A3">A3</option>
                <option value="Letter">Letter</option>
                <option value="Legal">Legal</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 生成配置 -->
        <div class="config-section">
          <h3 class="section-title">生成配置</h3>
          <div class="form-group">
            <label class="checkbox-option">
              <input type="checkbox" v-model="reportConfig.includeCharts" />
              <span>包含图表</span>
            </label>
          </div>
          
          <div class="form-group">
            <label class="checkbox-option">
              <input type="checkbox" v-model="reportConfig.includeSummary" />
              <span>包含摘要</span>
            </label>
          </div>
          
          <div class="form-group">
            <label class="checkbox-option">
              <input type="checkbox" v-model="reportConfig.includeRecommendations" />
              <span>包含建议</span>
            </label>
          </div>
          
          <div class="form-group">
            <label class="checkbox-option">
              <input type="checkbox" v-model="reportConfig.autoSchedule" />
              <span>定期自动生成</span>
            </label>
          </div>
          
          <div v-if="reportConfig.autoSchedule" class="schedule-config">
            <div class="form-group">
              <label class="form-label">生成频率</label>
              <select v-model="reportConfig.scheduleFrequency" class="form-select">
                <option value="daily">每日</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
                <option value="quarterly">每季度</option>
              </select>
            </div>
            
            <div class="form-group">
              <label class="form-label">生成时间</label>
              <input 
                v-model="reportConfig.scheduleTime" 
                type="time" 
                class="form-input"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧预览面板 -->
      <div class="preview-panel">
        <div class="preview-header">
          <h3 class="preview-title">报表预览</h3>
          <div class="preview-actions">
            <button class="preview-btn" @click="refreshPreview">
              🔄 刷新
            </button>
            <button class="preview-btn" @click="togglePreviewMode">
              {{ previewMode === 'structure' ? '📊 数据' : '🏗️ 结构' }}
            </button>
          </div>
        </div>
        
        <div class="preview-content">
          <div v-if="previewMode === 'structure'" class="structure-preview">
            <div class="report-structure">
              <div class="structure-header">
                <h4>{{ reportConfig.name || '未命名报表' }}</h4>
                <div class="structure-meta">
                  <span class="report-type">{{ getReportTypeText(reportConfig.type) }}</span>
                  <span class="report-period">{{ getTimePeriodText() }}</span>
                </div>
              </div>
              
              <div class="structure-sections">
                <div 
                  v-for="section in previewSections" 
                  :key="section.id"
                  class="section-item"
                  :class="{ included: section.included }"
                >
                  <div class="section-header">
                    <span class="section-icon">{{ section.icon }}</span>
                    <span class="section-title">{{ section.title }}</span>
                    <span class="section-status">
                      {{ section.included ? '✓' : '○' }}
                    </span>
                  </div>
                  <div class="section-description">{{ section.description }}</div>
                  <div v-if="section.items" class="section-items">
                    <span 
                      v-for="item in section.items" 
                      :key="item"
                      class="section-item-tag"
                    >
                      {{ item }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="data-preview">
            <div class="preview-stats">
              <div class="stat-item">
                <span class="stat-label">预计页数</span>
                <span class="stat-value">{{ estimatedPages }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">数据条数</span>
                <span class="stat-value">{{ estimatedDataRows }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">图表数量</span>
                <span class="stat-value">{{ estimatedCharts }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">生成时间</span>
                <span class="stat-value">{{ estimatedTime }}分钟</span>
              </div>
            </div>
            
            <div class="sample-data">
              <h5>样本数据预览</h5>
              <div class="data-table">
                <table>
                  <thead>
                    <tr>
                      <th>时间</th>
                      <th>车辆</th>
                      <th>指标</th>
                      <th>数值</th>
                      <th>状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="row in sampleData" :key="row.id">
                      <td>{{ row.time }}</td>
                      <td>{{ row.vehicle }}</td>
                      <td>{{ row.metric }}</td>
                      <td>{{ row.value }}</td>
                      <td :class="row.status">{{ row.statusText }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        
        <div class="preview-footer">
          <div class="validation-status">
            <span class="validation-icon" :class="validationStatus.type">
              {{ validationStatus.icon }}
            </span>
            <span class="validation-message">{{ validationStatus.message }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 模板库弹窗 -->
    <div v-if="showTemplateDialog" class="modal-overlay" @click="closeTemplateDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>报表模板库</h3>
          <button class="close-btn" @click="closeTemplateDialog">×</button>
        </div>
        
        <div class="modal-body">
          <div class="template-categories">
            <button 
              v-for="category in templateCategories" 
              :key="category.id"
              class="template-category-btn"
              :class="{ active: selectedTemplateCategory === category.id }"
              @click="selectTemplateCategory(category.id)"
            >
              {{ category.name }}
            </button>
          </div>
          
          <div class="template-grid">
            <div 
              v-for="template in filteredTemplates" 
              :key="template.id"
              class="template-card"
              @click="selectTemplate(template)"
            >
              <div class="template-icon">{{ template.icon }}</div>
              <div class="template-info">
                <h4 class="template-name">{{ template.name }}</h4>
                <p class="template-description">{{ template.description }}</p>
                <div class="template-meta">
                  <span class="template-type">{{ template.type }}</span>
                  <span class="template-usage">使用 {{ template.usageCount }} 次</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 生成进度弹窗 -->
    <div v-if="showGenerationDialog" class="modal-overlay">
      <div class="modal-content generation-modal">
        <div class="modal-header">
          <h3>生成报表</h3>
        </div>
        
        <div class="modal-body">
          <div class="generation-progress">
            <div class="progress-header">
              <span class="progress-title">{{ generationStatus.stage }}</span>
              <span class="progress-percent">{{ generationProgress }}%</span>
            </div>
            
            <div class="progress-bar">
              <div 
                class="progress-fill"
                :style="{ width: generationProgress + '%' }"
              ></div>
            </div>
            
            <div class="progress-details">
              <div class="detail-item">
                <span class="detail-label">当前步骤:</span>
                <span class="detail-value">{{ generationStatus.currentStep }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">已处理:</span>
                <span class="detail-value">{{ generationStatus.processed }}/{{ generationStatus.total }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">预计剩余:</span>
                <span class="detail-value">{{ generationStatus.remaining }}分钟</span>
              </div>
            </div>
          </div>
          
          <div class="generation-logs">
            <h5>生成日志</h5>
            <div class="log-container">
              <div 
                v-for="(log, index) in generationLogs" 
                :key="index"
                class="log-entry"
                :class="log.level"
              >
                <span class="log-time">{{ log.time }}</span>
                <span class="log-message">{{ log.message }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div v-if="generationComplete" class="modal-footer">
          <button class="modal-btn secondary" @click="closeGenerationDialog">
            关闭
          </button>
          <button class="modal-btn primary" @click="viewGeneratedReport">
            查看报表
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'

// 响应式数据
const reportConfig = reactive({
  name: '',
  type: '',
  category: '',
  description: '',
  timeType: 'relative',
  relativeTime: 'last_7_days',
  startTime: '',
  endTime: '',
  vehicleFilter: 'all',
  outputFormat: 'pdf',
  pageOrientation: 'portrait',
  pageSize: 'A4',
  includeCharts: true,
  includeSummary: true,
  includeRecommendations: false,
  autoSchedule: false,
  scheduleFrequency: 'weekly',
  scheduleTime: '09:00'
})

const selectedDataSources = ref([])
const selectedCategories = ref([])
const selectedVehicles = ref([])
const selectedContentItems = ref([])
const vehicleSearchQuery = ref('')

const previewMode = ref('structure')
const showTemplateDialog = ref(false)
const showGenerationDialog = ref(false)
const generationComplete = ref(false)
const generationProgress = ref(0)

const selectedTemplateCategory = ref('all')

// 数据源
const availableDataSources = ref([
  {
    id: 'sensor_data',
    name: '传感器数据',
    icon: '📡',
    description: '实时传感器监控数据',
    status: 'online',
    recordCount: 125000,
    dataSize: '2.3GB'
  },
  {
    id: 'maintenance_logs',
    name: '维护记录',
    icon: '🔧',
    description: '设备维护和保养记录',
    status: 'online',
    recordCount: 8500,
    dataSize: '156MB'
  },
  {
    id: 'fault_records',
    name: '故障记录',
    icon: '⚠️',
    description: '故障报告和处理记录',
    status: 'online',
    recordCount: 3200,
    dataSize: '89MB'
  },
  {
    id: 'performance_metrics',
    name: '性能指标',
    icon: '📊',
    description: '车辆性能评估数据',
    status: 'online',
    recordCount: 45000,
    dataSize: '678MB'
  },
  {
    id: 'operation_logs',
    name: '操作日志',
    icon: '📝',
    description: '操作员操作记录',
    status: 'offline',
    recordCount: 15600,
    dataSize: '234MB'
  }
])

// 车辆分类
const vehicleCategories = ref([
  { id: 'tank', name: '主战坦克', count: 45 },
  { id: 'armored', name: '装甲车', count: 67 },
  { id: 'artillery', name: '自行火炮', count: 28 },
  { id: 'missile', name: '导弹车', count: 16 }
])

// 车辆列表
const vehicles = ref([
  { id: 1, name: 'ZTZ-99A主战坦克', number: 'T001', category: 'tank' },
  { id: 2, name: 'ZBD-04步兵战车', number: 'A002', category: 'armored' },
  { id: 3, name: 'PLZ-05自行榴弹炮', number: 'P003', category: 'artillery' },
  { id: 4, name: 'HQ-9防空导弹', number: 'M004', category: 'missile' }
])

// 报表内容分类
const reportContentCategories = ref([
  {
    id: 'overview',
    name: '概览统计',
    items: [
      { id: 'fleet_summary', name: '车队概况', description: '总体运行状态' },
      { id: 'key_metrics', name: '关键指标', description: '重要性能指标' },
      { id: 'trend_analysis', name: '趋势分析', description: '数据变化趋势' }
    ]
  },
  {
    id: 'operation',
    name: '运行分析',
    items: [
      { id: 'uptime_stats', name: '运行时间', description: '设备运行统计' },
      { id: 'utilization', name: '利用率', description: '设备使用效率' },
      { id: 'load_analysis', name: '负载分析', description: '工作负载情况' }
    ]
  },
  {
    id: 'maintenance',
    name: '维护分析',
    items: [
      { id: 'maintenance_schedule', name: '维护计划', description: '计划维护情况' },
      { id: 'maintenance_cost', name: '维护成本', description: '维护费用统计' },
      { id: 'spare_parts', name: '备件消耗', description: '零配件使用' }
    ]
  },
  {
    id: 'fault',
    name: '故障分析',
    items: [
      { id: 'fault_frequency', name: '故障频率', description: '故障发生统计' },
      { id: 'fault_types', name: '故障类型', description: '故障分类分析' },
      { id: 'mtbf_analysis', name: 'MTBF分析', description: '平均故障间隔' },
      { id: 'repair_time', name: '修复时间', description: '故障修复耗时' }
    ]
  }
])

// 输出格式
const outputFormats = ref([
  {
    value: 'pdf',
    name: 'PDF',
    icon: '📄',
    description: '便携文档格式，适合打印和分享'
  },
  {
    value: 'excel',
    name: 'Excel',
    icon: '📊',
    description: '电子表格格式，便于数据分析'
  },
  {
    value: 'word',
    name: 'Word',
    icon: '📝',
    description: '文档格式，便于编辑和批注'
  },
  {
    value: 'html',
    name: 'HTML',
    icon: '🌐',
    description: '网页格式，支持交互式图表'
  }
])

// 模板分类
const templateCategories = ref([
  { id: 'all', name: '全部' },
  { id: 'operation', name: '运行报告' },
  { id: 'maintenance', name: '维护报告' },
  { id: 'fault', name: '故障分析' },
  { id: 'performance', name: '性能分析' }
])

// 报表模板
const reportTemplates = ref([
  {
    id: 1,
    name: '日常运行报告',
    type: 'operation',
    icon: '📈',
    description: '车辆日常运行状态和关键指标汇总',
    usageCount: 156,
    config: {
      type: 'daily',
      category: 'operation',
      contentItems: ['fleet_summary', 'key_metrics', 'uptime_stats'],
      outputFormat: 'pdf'
    }
  },
  {
    id: 2,
    name: '维护成本分析',
    type: 'maintenance',
    icon: '💰',
    description: '维护费用统计和成本分析报告',
    usageCount: 89,
    config: {
      type: 'monthly',
      category: 'maintenance',
      contentItems: ['maintenance_cost', 'spare_parts', 'maintenance_schedule'],
      outputFormat: 'excel'
    }
  },
  {
    id: 3,
    name: '故障分析报告',
    type: 'fault',
    icon: '⚠️',
    description: '故障统计、趋势分析和改进建议',
    usageCount: 134,
    config: {
      type: 'weekly',
      category: 'fault',
      contentItems: ['fault_frequency', 'fault_types', 'mtbf_analysis'],
      outputFormat: 'pdf'
    }
  },
  {
    id: 4,
    name: '性能评估报告',
    type: 'performance',
    icon: '🎯',
    description: '设备性能指标评估和对比分析',
    usageCount: 67,
    config: {
      type: 'quarterly',
      category: 'performance',
      contentItems: ['key_metrics', 'trend_analysis', 'utilization'],
      outputFormat: 'html'
    }
  }
])

// 生成状态
const generationStatus = reactive({
  stage: '准备中...',
  currentStep: '初始化配置',
  processed: 0,
  total: 100,
  remaining: 5
})

const generationLogs = ref([])

// 样本数据
const sampleData = ref([
  {
    id: 1,
    time: '2024-03-15 09:00',
    vehicle: 'T001',
    metric: '发动机温度',
    value: '78°C',
    status: 'normal',
    statusText: '正常'
  },
  {
    id: 2,
    time: '2024-03-15 09:15',
    vehicle: 'A002',
    metric: '油压',
    value: '4.2bar',
    status: 'normal',
    statusText: '正常'
  },
  {
    id: 3,
    time: '2024-03-15 09:30',
    vehicle: 'P003',
    metric: '液压系统',
    value: '异常',
    status: 'warning',
    statusText: '警告'
  }
])

// 计算属性
const filteredVehicles = computed(() => {
  if (!vehicleSearchQuery.value) return vehicles.value
  
  const query = vehicleSearchQuery.value.toLowerCase()
  return vehicles.value.filter(vehicle => 
    vehicle.name.toLowerCase().includes(query) ||
    vehicle.number.toLowerCase().includes(query)
  )
})

const filteredTemplates = computed(() => {
  if (selectedTemplateCategory.value === 'all') {
    return reportTemplates.value
  }
  return reportTemplates.value.filter(template => 
    template.type === selectedTemplateCategory.value
  )
})

const previewSections = computed(() => {
  const sections = []
  
  // 基础信息部分
  sections.push({
    id: 'header',
    title: '报表标题和基本信息',
    icon: '📋',
    description: '报表名称、生成时间、时间范围等基本信息',
    included: true
  })
  
  // 根据选择的内容项目生成预览
  reportContentCategories.value.forEach(category => {
    const categoryItems = category.items.filter(item => 
      selectedContentItems.value.includes(item.id)
    )
    
    if (categoryItems.length > 0) {
      sections.push({
        id: category.id,
        title: category.name,
        icon: getCategoryIcon(category.id),
        description: `包含 ${categoryItems.length} 个分析项目`,
        included: true,
        items: categoryItems.map(item => item.name)
      })
    }
  })
  
  // 图表部分
  if (reportConfig.includeCharts) {
    sections.push({
      id: 'charts',
      title: '数据图表',
      icon: '📊',
      description: '数据可视化图表和趋势分析',
      included: true
    })
  }
  
  // 摘要部分
  if (reportConfig.includeSummary) {
    sections.push({
      id: 'summary',
      title: '执行摘要',
      icon: '📝',
      description: '关键发现和重要结论汇总',
      included: true
    })
  }
  
  // 建议部分
  if (reportConfig.includeRecommendations) {
    sections.push({
      id: 'recommendations',
      title: '改进建议',
      icon: '💡',
      description: '基于数据分析的改进建议',
      included: true
    })
  }
  
  return sections
})

const estimatedPages = computed(() => {
  let pages = 1 // 基础页面
  pages += selectedContentItems.value.length * 0.5 // 每个内容项约0.5页
  if (reportConfig.includeCharts) pages += 2
  if (reportConfig.includeSummary) pages += 1
  if (reportConfig.includeRecommendations) pages += 1
  return Math.ceil(pages)
})

const estimatedDataRows = computed(() => {
  let rows = 0
  selectedDataSources.value.forEach(sourceId => {
    const source = availableDataSources.value.find(s => s.id === sourceId)
    if (source) rows += Math.min(source.recordCount, 1000) // 限制每个数据源最多1000行
  })
  return rows
})

const estimatedCharts = computed(() => {
  if (!reportConfig.includeCharts) return 0
  return Math.min(selectedContentItems.value.length * 0.8, 10) // 每个内容项约0.8个图表
})

const estimatedTime = computed(() => {
  let time = 1 // 基础时间
  time += selectedDataSources.value.length * 0.5
  time += selectedContentItems.value.length * 0.3
  if (reportConfig.includeCharts) time += 2
  return Math.ceil(time)
})

const validationStatus = computed(() => {
  if (!reportConfig.name) {
    return { type: 'error', icon: '❌', message: '请输入报表名称' }
  }
  if (!reportConfig.type) {
    return { type: 'error', icon: '❌', message: '请选择报表类型' }
  }
  if (selectedDataSources.value.length === 0) {
    return { type: 'warning', icon: '⚠️', message: '建议至少选择一个数据源' }
  }
  if (selectedContentItems.value.length === 0) {
    return { type: 'warning', icon: '⚠️', message: '建议至少选择一个报表内容' }
  }
  return { type: 'success', icon: '✅', message: '配置完整，可以生成报表' }
})

// 方法
const toggleDataSource = (sourceId) => {
  const index = selectedDataSources.value.indexOf(sourceId)
  if (index > -1) {
    selectedDataSources.value.splice(index, 1)
  } else {
    selectedDataSources.value.push(sourceId)
  }
}

const toggleVehicle = (vehicleId) => {
  const index = selectedVehicles.value.indexOf(vehicleId)
  if (index > -1) {
    selectedVehicles.value.splice(index, 1)
  } else {
    selectedVehicles.value.push(vehicleId)
  }
}

const isCategorySelected = (categoryId) => {
  const category = reportContentCategories.value.find(c => c.id === categoryId)
  if (!category) return false
  
  return category.items.some(item => selectedContentItems.value.includes(item.id))
}

const toggleContentCategory = (categoryId) => {
  const category = reportContentCategories.value.find(c => c.id === categoryId)
  if (!category) return
  
  const isSelected = isCategorySelected(categoryId)
  
  if (isSelected) {
    // 取消选择该分类下的所有项目
    category.items.forEach(item => {
      const index = selectedContentItems.value.indexOf(item.id)
      if (index > -1) {
        selectedContentItems.value.splice(index, 1)
      }
    })
  } else {
    // 选择该分类下的所有项目
    category.items.forEach(item => {
      if (!selectedContentItems.value.includes(item.id)) {
        selectedContentItems.value.push(item.id)
      }
    })
  }
}

const getSourceStatusText = (status) => {
  return status === 'online' ? '在线' : '离线'
}

const getReportTypeText = (type) => {
  const typeMap = {
    daily: '日报',
    weekly: '周报',
    monthly: '月报',
    quarterly: '季报',
    annual: '年报',
    custom: '自定义'
  }
  return typeMap[type] || type
}

const getTimePeriodText = () => {
  if (reportConfig.timeType === 'relative') {
    const periodMap = {
      last_1_hour: '过去1小时',
      last_24_hours: '过去24小时',
      last_7_days: '过去7天',
      last_30_days: '过去30天',
      last_90_days: '过去90天',
      last_1_year: '过去1年'
    }
    return periodMap[reportConfig.relativeTime] || ''
  } else {
    return `${reportConfig.startTime} - ${reportConfig.endTime}`
  }
}

const getCategoryIcon = (categoryId) => {
  const iconMap = {
    overview: '📊',
    operation: '⚙️',
    maintenance: '🔧',
    fault: '⚠️'
  }
  return iconMap[categoryId] || '📄'
}

const refreshPreview = () => {
  console.log('刷新预览')
}

const togglePreviewMode = () => {
  previewMode.value = previewMode.value === 'structure' ? 'data' : 'structure'
}

const loadTemplate = () => {
  showTemplateDialog.value = true
}

const closeTemplateDialog = () => {
  showTemplateDialog.value = false
}

const selectTemplateCategory = (categoryId) => {
  selectedTemplateCategory.value = categoryId
}

const selectTemplate = (template) => {
  // 应用模板配置
  Object.assign(reportConfig, template.config)
  
  // 设置内容项目
  selectedContentItems.value = template.config.contentItems || []
  
  console.log('应用模板:', template.name)
  closeTemplateDialog()
}

const previewReport = () => {
  console.log('预览报表')
  // 可以打开新窗口显示报表预览
}

const generateReport = async () => {
  if (validationStatus.value.type === 'error') {
    alert(validationStatus.value.message)
    return
  }
  
  showGenerationDialog.value = true
  generationComplete.value = false
  generationProgress.value = 0
  generationLogs.value = []
  
  // 模拟报表生成过程
  const stages = [
    { name: '数据收集', steps: ['初始化配置', '连接数据源', '提取数据'] },
    { name: '数据处理', steps: ['数据清洗', '数据聚合', '计算指标'] },
    { name: '报表生成', steps: ['生成图表', '格式化内容', '输出文件'] }
  ]
  
  let totalSteps = stages.reduce((sum, stage) => sum + stage.steps.length, 0)
  let currentStep = 0
  
  for (const stage of stages) {
    generationStatus.stage = stage.name
    
    for (const step of stage.steps) {
      generationStatus.currentStep = step
      generationStatus.processed = currentStep
      generationStatus.total = totalSteps
      
      // 更新进度
      generationProgress.value = Math.round((currentStep / totalSteps) * 100)
      generationStatus.remaining = Math.ceil((totalSteps - currentStep) * 0.5)
      
      // 添加日志
      addGenerationLog('info', `正在执行: ${step}`)
      
      // 模拟处理时间
      await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000))
      
      currentStep++
    }
  }
  
  generationProgress.value = 100
  generationComplete.value = true
  addGenerationLog('success', '报表生成完成!')
}

const addGenerationLog = (level, message) => {
  generationLogs.value.push({
    time: new Date().toLocaleTimeString(),
    level,
    message
  })
  
  // 保持日志数量在合理范围内
  if (generationLogs.value.length > 50) {
    generationLogs.value.shift()
  }
}

const closeGenerationDialog = () => {
  showGenerationDialog.value = false
}

const viewGeneratedReport = () => {
  console.log('查看生成的报表')
  closeGenerationDialog()
  // 跳转到报表查看页面
}

onMounted(() => {
  console.log('报表生成页面已加载')
  
  // 默认选择一些数据源
  selectedDataSources.value = ['sensor_data', 'maintenance_logs']
  
  // 默认选择一些内容项目
  selectedContentItems.value = ['fleet_summary', 'key_metrics', 'uptime_stats']
})
</script>

<style scoped>
.report-generation-container {
  width: 94vw;
  min-height: 100vh;
  background: #0c1120;
  color: #e6e6e6;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.page-title {
  font-size: 2.8vw;
  margin: 0 0 0.3vh 0;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.3vw;
  margin: 0;
  opacity: 0.9;
}

.header-right {
  display: flex;
  gap: 1vw;
}

.header-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.header-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.header-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border-color: #4CAF50;
}

.main-content {
  flex: 1;
  display: flex;
  padding: 2vh 2vw;
  gap: 2vw;
  height: calc(100vh - 12vh);
}

.config-panel {
  width: 40vw;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  overflow-y: auto;
}

.preview-panel {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
}

.config-section {
  margin-bottom: 2.5vh;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1.5vh 1vw;
  border: 1px solid rgba(255,255,255,0.1);
}

.section-title {
  font-size: 1.4vw;
  margin: 0 0 1.5vh 0;
  color: #4CAF50;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.5vh;
}

.form-group {
  margin-bottom: 1.5vh;
}

.form-label {
  display: block;
  font-size: 1.1vw;
  margin-bottom: 0.5vh;
  color: rgba(255,255,255,0.9);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  padding: 0.8vh 1vw;
  font-size: 1vw;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.form-select option {
  background: #333;
  color: #fff;
}

.data-source-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.data-source-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 1vh 1vw;
  cursor: pointer;
  transition: all 0.3s ease;
}

.data-source-item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.data-source-item.selected {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5vh;
}

.source-icon {
  font-size: 1.2vw;
  margin-right: 0.8vw;
}

.source-name {
  font-size: 1.1vw;
  font-weight: 600;
  flex: 1;
}

.source-status {
  padding: 0.2vh 0.8vw;
  border-radius: 10px;
  font-size: 0.8vw;
  font-weight: 600;
}

.source-status.online {
  background: rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.source-status.offline {
  background: rgba(158, 158, 158, 0.3);
  color: #9E9E9E;
}

.source-description {
  font-size: 0.9vw;
  opacity: 0.8;
  margin-bottom: 0.5vh;
}

.source-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8vw;
  opacity: 0.7;
}

.filter-type {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  margin-bottom: 1.5vh;
}

.radio-option, .checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  font-size: 1vw;
  cursor: pointer;
}

.radio-option input[type="radio"], 
.checkbox-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #4CAF50;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.vehicle-search {
  margin-bottom: 1vh;
}

.search-input {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  padding: 0.6vh 1vw;
  font-size: 0.9vw;
  outline: none;
  box-sizing: border-box;
}

.vehicle-list {
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.vehicle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6vh 1vw;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.vehicle-item:hover {
  background: rgba(255,255,255,0.1);
}

.vehicle-item.selected {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.vehicle-name {
  font-size: 0.9vw;
  font-weight: 500;
}

.vehicle-number {
  font-size: 0.8vw;
  opacity: 0.7;
}

.content-categories {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.content-category {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1vh 1vw;
  border: 1px solid rgba(255,255,255,0.1);
}

.category-header {
  margin-bottom: 1vh;
}

.category-checkbox {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  cursor: pointer;
}

.category-title {
  font-size: 1.1vw;
  font-weight: 600;
  color: #4CAF50;
}

.category-items {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  margin-left: 2vw;
}

.content-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8vw;
  cursor: pointer;
  padding: 0.5vh 0;
}

.item-name {
  font-size: 0.9vw;
  font-weight: 500;
  min-width: 100px;
}

.item-description {
  font-size: 0.8vw;
  opacity: 0.7;
  flex: 1;
}

.format-options {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-bottom: 1.5vh;
}

.format-option {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vh 1vw;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.format-option:hover {
  background: rgba(255,255,255,0.1);
}

.format-option.selected {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.format-content {
  display: flex;
  align-items: center;
  gap: 1vw;
  flex: 1;
}

.format-icon {
  font-size: 1.5vw;
}

.format-info {
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.format-name {
  font-size: 1vw;
  font-weight: 600;
}

.format-description {
  font-size: 0.8vw;
  opacity: 0.7;
}

.format-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vw;
}

.schedule-config {
  margin-top: 1vh;
  padding-top: 1vh;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.preview-title {
  font-size: 1.4vw;
  margin: 0;
  color: #4CAF50;
}

.preview-actions {
  display: flex;
  gap: 0.8vw;
}

.preview-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.preview-btn:hover {
  background: rgba(255,255,255,0.2);
}

.preview-content {
  flex: 1;
  overflow-y: auto;
}

.report-structure {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1.5vh 1vw;
}

.structure-header {
  text-align: center;
  margin-bottom: 2vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.structure-header h4 {
  margin: 0 0 0.5vh 0;
  font-size: 1.5vw;
  color: #4CAF50;
}

.structure-meta {
  display: flex;
  justify-content: center;
  gap: 2vw;
  font-size: 0.9vw;
  opacity: 0.8;
}

.report-type {
  background: rgba(76, 175, 80, 0.3);
  padding: 0.2vh 0.8vw;
  border-radius: 10px;
}

.structure-sections {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.section-item {
  padding: 1vh 1vw;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.section-item.included {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.3);
  opacity: 1;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5vh;
}

.section-icon {
  font-size: 1.2vw;
  margin-right: 0.8vw;
}

.section-title {
  font-size: 1vw;
  font-weight: 600;
  flex: 1;
}

.section-status {
  font-size: 1.2vw;
  color: #4CAF50;
}

.section-description {
  font-size: 0.8vw;
  opacity: 0.8;
  margin-bottom: 0.5vh;
}

.section-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
}

.section-item-tag {
  background: rgba(255,255,255,0.1);
  padding: 0.2vh 0.6vw;
  border-radius: 8px;
  font-size: 0.7vw;
}

.preview-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1vw;
  margin-bottom: 2vh;
}

.stat-item {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1vh 1vw;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.9vw;
  opacity: 0.8;
  margin-bottom: 0.5vh;
}

.stat-value {
  display: block;
  font-size: 1.3vw;
  font-weight: 600;
  color: #4CAF50;
}

.sample-data h5 {
  margin: 0 0 1vh 0;
  font-size: 1.1vw;
  color: #4CAF50;
}

.data-table {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  overflow: hidden;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8vw;
}

.data-table th {
  background: rgba(255,255,255,0.1);
  padding: 0.8vh 1vw;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.data-table td {
  padding: 0.6vh 1vw;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.data-table td.normal {
  color: #4CAF50;
}

.data-table td.warning {
  color: #FF9800;
}

.data-table td.error {
  color: #F44336;
}

.preview-footer {
  margin-top: 1vh;
  padding-top: 1vh;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.validation-status {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  font-size: 0.9vw;
}

.validation-icon {
  font-size: 1.2vw;
}

.validation-icon.success {
  color: #4CAF50;
}

.validation-icon.warning {
  color: #FF9800;
}

.validation-icon.error {
  color: #F44336;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, #2a5298, #1e3c72);
  border-radius: 15px;
  width: 70vw;
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.generation-modal {
  width: 60vw;
  max-width: 700px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 2vw;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.6vw;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8vw;
  cursor: pointer;
  padding: 0.3vh 0.8vw;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255,255,255,0.1);
}

.modal-body {
  padding: 2vh 2vw;
}

.template-categories {
  display: flex;
  gap: 0.8vw;
  margin-bottom: 2vh;
  flex-wrap: wrap;
}

.template-category-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.6vh 1.2vw;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.template-category-btn:hover {
  background: rgba(255,255,255,0.2);
}

.template-category-btn.active {
  background: #4CAF50;
  border-color: #4CAF50;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5vw;
}

.template-card {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 1.5vh 1vw;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.2);
}

.template-card:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.template-icon {
  font-size: 2.5vw;
  text-align: center;
  margin-bottom: 1vh;
}

.template-name {
  font-size: 1.2vw;
  margin: 0 0 0.5vh 0;
  text-align: center;
  font-weight: 600;
}

.template-description {
  font-size: 0.9vw;
  opacity: 0.8;
  text-align: center;
  margin: 0 0 1vh 0;
  line-height: 1.4;
}

.template-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8vw;
  opacity: 0.7;
}

.template-type {
  background: rgba(76, 175, 80, 0.3);
  padding: 0.2vh 0.6vw;
  border-radius: 8px;
}

.generation-progress {
  margin-bottom: 2vh;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.progress-title {
  font-size: 1.2vw;
  font-weight: 600;
}

.progress-percent {
  font-size: 1.1vw;
  color: #4CAF50;
  font-weight: 600;
}

.progress-bar {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  height: 20px;
  overflow: hidden;
  margin-bottom: 1.5vh;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transition: width 0.3s ease;
  border-radius: 10px;
}

.progress-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
}

.detail-item {
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 0.8vh 1vw;
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 0.8vw;
  opacity: 0.7;
  margin-bottom: 0.3vh;
}

.detail-value {
  display: block;
  font-size: 1vw;
  font-weight: 600;
  color: #4CAF50;
}

.generation-logs h5 {
  margin: 0 0 1vh 0;
  font-size: 1.1vw;
  color: #4CAF50;
}

.log-container {
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 1vh;
  height: 150px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
}

.log-entry {
  display: flex;
  gap: 1vw;
  margin-bottom: 0.3vh;
  font-size: 0.8vw;
  line-height: 1.3;
}

.log-time {
  color: #9E9E9E;
  min-width: 60px;
}

.log-entry.info .log-message {
  color: #2196F3;
}

.log-entry.success .log-message {
  color: #4CAF50;
}

.log-entry.warning .log-message {
  color: #FF9800;
}

.log-entry.error .log-message {
  color: #F44336;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1vw;
  padding: 2vh 2vw;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.modal-btn {
  padding: 1vh 2vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.3);
}

.modal-btn.secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.modal-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  color: #fff;
  border-color: #4CAF50;
}

.modal-btn:hover {
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    height: auto;
  }
  
  .config-panel {
    width: 100%;
    max-height: 60vh;
  }
  
  .page-title {
    font-size: 5vw;
  }
  
  .page-subtitle {
    font-size: 2.5vw;
  }
  
  .header-btn {
    font-size: 2vw;
    padding: 1vh 2vw;
  }
  
  .section-title {
    font-size: 2.5vw;
  }
  
  .form-label {
    font-size: 2vw;
  }
  
  .form-input, .form-select, .form-textarea {
    font-size: 2vw;
  }
  
  .format-settings {
    grid-template-columns: 1fr;
  }
  
  .preview-stats {
    grid-template-columns: 1fr;
  }
  
  .progress-details {
    grid-template-columns: 1fr;
  }
  
  .template-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95vw;
    margin: 1vh;
  }
}
</style>
